<template>
    <div class="container">
      <aside class="sub-sidebar">
        <div class="header-left">
          <img src="@/assets/svgs/nine.svg" @click="() => router.push('/teacher/dashboard')" alt="Logo" class="header-icon" style="cursor: pointer;" />
          <div class="manager-title">AIGC智育优学</div>
        </div>
        <hr />
        
        <!-- 主菜单 -->
        <div class="menu-list">
          <div class="menu-item" 
            @click="navigateTo('manager')" 
            :class="{ 'active': selectedCourse === 'dashboard' }" 
            style="font-size: 18px; font-weight: bold;">
            管理首页
          </div>
          <div class="menu-item" 
            :class="{ 'active': selectedCourse === 'courseManagement' }" 
            style="font-size: 18px; font-weight: bold;">
            <span>课程管理</span>
          </div>
          <div class="menu-item sub-item" 
            @click="navigateTo('studentManager')"
            :class="{ 'active': selectedCourse === 'studentManagement' }">
            学生管理 
          </div>
          <div class="menu-item sub-item" 
            @click="navigateTo('teachingManagement')"
            :class="{ 'active': selectedCourse === 'teachingManagement' }">
            教学管理
          </div>
          <div class="menu-item sub-item" 
            @click="navigateTo('interaction')"
            :class="{ 'active': selectedCourse === 'interactionData' }">
            互动数据
          </div>
          <div class="menu-item sub-item" 
            @click="navigateTo('dialogue')"
            :class="{ 'active': selectedCourse === 'dialogueData' }">
            对话数据
          </div>
        </div>
      </aside>
      <div class="right-content">
        <main class="main">
          
        </main>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  
  const router = useRouter();
  const route = useRoute();
  
  // 接收路由参数
  const courseId = ref(route.params.courseId);
  
  // 在组件挂载时获取课程详情数据
  onMounted(async () => {
    selectedCourseName.value = '数学'; // 示例课程名称
  });
  
  const selectedCourse = ref(null);
  const selectedCourseName = ref('课程名称'); // 假设课程名称
  
  const navigateTo = async (page) => { 
    switch(page) {
      case 'manager':
        router.push('/teacher/manager');
        break;
      case 'studentManager':
        router.push(`/teacher/manager/course/${courseId.value}/studentManager`);
        break;
      case 'interaction':
        router.push(`/teacher/manager/course/${courseId.value}/interaction`);
        break;
      case 'dialogue':
        router.push(`/teacher/manager/course/${courseId.value}/dialogue`);
        break;
      case 'teachingManagement':
        router.push(`/teacher/manager/course/${courseId.value}/teaching`);
        break;
    }
  };
  </script>
  
  <style scoped>
  .container {
    display: flex;
    min-height: 100vh;
  }

  .sub-sidebar {
    width: 160px;
    height: calc(100vh - 50px);
    background: linear-gradient(to bottom, #43a1e4, #756CDB);
    padding: 20px;
    position: fixed;
    display: flex;
    flex-direction: column;
    margin-left: 0;
    margin-top: 0;
    z-index: -1;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .manager-title {
    color: white;
    font-size: 18px;
  }

  hr {
    border: 1px solid white; /* Style for the separator line */
    margin: 10px 0; /* Margin for spacing */
  }

  .menu-list {
    margin-top: 20px;
  }

  .menu-item {
    padding: 12px 15px;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 16px;
    position: relative;
  }

  .menu-item:hover,
  .menu-item.active {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .sub-item {
    padding-left: 30px;
    font-size: 16px;
  }
  </style>